<section class="vbox">
    <section class="scrollable wrapper">
        <h4 class="m-t-none">添加菜单 <span class="pull-right "><a href="#" id="colse"><i
                class="fa fa-times icon-muted fa-fw"></i></a></span></h4>

        <form data-validate="" id="addform">
            <div class="form-group">
                <label>名称 <i class="fa fa-info-sign text-xs text-muted">用于后台显示的配置标题</i></label>
                <input type="text" id="title" name="title" class="input-sm form-control" placeholder="菜单名称"
                       data-required="true">
            </div>
            <div class="form-group">
                <label>排序 <i class="fa fa-info-sign text-xs text-muted">用于分组显示的顺序</i></label>
                <input id="sort" type="text" name="sort" class=" input-sm form-control" placeholder="0" value="0">
            </div>
            <div class="form-group">
                <label>连接 <i class="fa fa-info-sign text-xs text-muted">如：index/index</i></label>
                <input id="url" type="text" name="url" class=" input-sm form-control" placeholder="url"
                       data-required="true">
            </div>
            <div class="form-group">
                <label>上级菜单 <i class="fa fa-info-sign text-xs text-muted">所属的上级菜单</i></label>
                <select class="form-control m-b" name="pid" id="pid">

                </select>
            </div>
            <div class="form-group">
                <label>分组 <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i></label>
                <select class="form-control m-b" name="group" id="group">
                    {% for index, items in config.setup.MENU_GROUP %}
                    <option value="{{index}}">{{items}}</option>
                    {% endfor%}
                </select>
            </div>
            <div class="form-group">
                <label>是否隐藏 <i class="fa fa-info-sign text-xs text-muted">用于左侧分组二级菜单</i></label>

                <div class="">
                    <label class="radio-inline i-checks">
                        <input type="radio" value="1" name="hide">
                        <i></i>
                        是
                    </label>
                    <label class="radio-inline i-checks">
                        <input type="radio" value="0" name="hide" checked>
                        <i></i>
                        否
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label>仅开发者模式可见 <i class="fa fa-info-sign text-xs text-muted"></i></label>

                <div class="">
                    <label class="radio-inline i-checks">
                        <input type="radio" value="1" name="is_dev">
                        <i></i>
                        是
                    </label>
                    <label class="radio-inline i-checks">
                        <input type="radio" value="0" name="is_dev" checked>
                        <i></i>
                        否
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label>说明 <i class="fa fa-info-sign text-xs text-muted">菜单详细说明</i></label>
                <input id="tip" type="text" name="tip" class=" input-sm form-control" placeholder="说明">
            </div>
            <div class="form-group">
                <label>图标 <i class="fa fa-info-sign text-xs text-muted">菜单图标，只对一级菜单有效，请使用 <a href="http://fontawesome.io/" target="_blank">fontawesome.io</a> ,默认留空。</i></label>
                <input id="ico" type="text" name="ico" class=" input-sm form-control" placeholder="说明"   >
            </div>
            <div class="m-t-lg">
                <button class="btn btn-block btn-primary" id="addbtn">添加菜单</button>
            </div>
            <div class="m-t-lg"></div>
        </form>
    </section>
</section>
<script>

    $(function () {
        $("#colse").click(function () {
            $("#bjax-target").removeClass("show");
        })


        $("#addbtn").on('click', function () {
            $('#addform').parsley().validate();
            if (true === $('#addform').parsley().isValid()) {
                _addFunAjax();
            }
            return false;
        })
        //获取上级菜单
        $.ajax({
            url: "/admin/menu/getmenu",
            success: function (msg) {
                /* 展示生成的HTML */
                $("#pid").html(category_to_html(msg));

            }
        })

        /**
         * 提交表单
         * @private
         */
        function _addFunAjax() {
            var title = $("#title").val();
            var sort = $("#sort").val();
            var url = $("#url").val();
            var pid = $("#pid").val();
            var group = $("#group").val();
            var hide=  $("input[name='hide']:checked").val();
            var is_dev=  $("input[name='is_dev']:checked").val();
            var tip = $("input[name='tip']").val();
            var ico = $("input[name='ico']").val();
            var jsonData = {
                "title": title,
                "sort": sort,
                "url": url,
                "pid":pid,
                "group":group,
                "hide":hide,
                "is_dev":is_dev,
                "tip":tip,
                "ico":ico
            };
            $.ajax({
                type: 'POST',
                url: '/admin/menu/add',
                data: jsonData,
                success: function (json) {
                    if (json) {

                        oTable.ajax.reload();
                        resetFrom();
                        toastr.success("添加成功！")
                    } else {
                        toastr.error("添加失败！")
                    }
                }
            });
        }


        /* 生成HTML ul/li 形式 */
        function category_to_html(nodes) {
            var html = [];
            var size = nodes.length;
            var left = null;
            html.push('<option value="0" selected="selected">一级菜单</option>');
            for (var i = 0; i < size; i++) {
                left = nodes[i];
                        html.push('<option value="' + left['id'] +  '">'+new Array(left["deep"]+1).join("= ") + left['title'] +  '</option>');
            }
            return html.join("\n");
        }

        /**
         * 重置表单
         */
        function resetFrom() {
            $('form').each(function (index) {
                $('form')[index].reset();
            });
        }
    })
</script>